@let tableConfig = this.tableConfig();
@let _scrollConfig = this._scrollConfig();
<nz-table
  nzShowPagination
  nzShowQuickJumper
  nzShowSizeChanger
  nzTableLayout="fixed"
  [nzBordered]="true"
  [nzData]="_dataList()"
  [nzFrontPagination]="false"
  [nzLoading]="tableConfig.loading"
  [nzOuterBordered]="true"
  [nzPageIndex]="tableConfig.pageIndex"
  [nzPageSize]="tableConfig.pageSize"
  [nzScroll]="_scrollConfig"
  [nzShowTotal]="rangeTemplate"
  [nzSize]="tableSize"
  [nzTotal]="tableConfig.total"
  [nzVirtualForTrackBy]="trackById"
  (nzPageSizeChange)="onPageSizeChange($event)"
  (nzQueryParams)="onQueryParamsChange($event)"
>
  <ng-template #rangeTemplate let-range="range" let-total>{{ range[0] }}-{{ range[1] }} 共 {{ total }} 条</ng-template>
  <thead>
    <tr>
      @if (tableConfig.showCheckbox) {
        <th class="animate-bg-0" [nzChecked]="allChecked" [nzIndeterminate]="indeterminate" [nzLeft]="true" [nzWidth]="'40px'" (nzCheckedChange)="onAllChecked($event)"></th>
      }
      @for (head of tableConfig.headers; track trackByTableHead(headIndex, head); let headIndex = $index; let last = $last; let first = $first) {
        @if (head.show === undefined || head.show === true) {
          <th
            class="animate-bg-0"
            nz-resizable
            nzBounds="parent"
            nzPreview
            [ngClass]="[head.thClassList ? head.thClassList : [], head.thClassFn ? head.thClassFn(head) : ''].flat()"
            [nzLeft]="!!head.fixed && head.fixedDir === 'left'"
            [nzMaxWidth]="1200"
            [nzMinWidth]="1"
            [nzRight]="!!head.fixed && head.fixedDir === 'right'"
            [nzWidth]="head.width + 'px'"
            (nzResizeEnd)="onResize($event, head.title)"
          >
            @if (!last && (tableConfig.showCheckbox ? true : !last)) {
              <nz-resize-handle nzDirection="right">
                <div class="resize-trigger"></div>
              </nz-resize-handle>
            }
            <div>
              {{ head.title }}
              @if (head.showSort) {
                <div class="sort-wrap m-l-8 hand-model" (click)="changeSort(head)">
                  <i class="sort-caret ascending" [class.sort-caret-sel-asc]="head.sortDir === 'asc'"></i>
                  <i class="sort-caret descending" [class.sort-caret-sel-desc]="head.sortDir === 'desc'"></i>
                </div>
              }
            </div>
          </th>
        }
      }
    </tr>
  </thead>
  <tbody>
    @for (row of _dataList(); track trackByTableBody(rowIndex, row); let rowIndex = $index) {
      <tr>
        @if (tableConfig.showCheckbox) {
          <td class="animate-bg-0" nzEllipsis [nzChecked]="row['_checked']" [nzDisabled]="row['_disabled']" [nzLeft]="true" (nzCheckedChange)="checkRowSingle($event, rowIndex)"></td>
        }
        @for (head of tableConfig.headers; track trackByTableHead($index, head)) {
          @if (head.show === undefined || head.show === true) {
            <td
              [ngClass]="[head.tdClassList ? head.tdClassList : [], head.tdClassFn ? head.tdClassFn(row, rowIndex) : ''].flat()"
              [nzEllipsis]="!head.notNeedEllipsis"
              [nzLeft]="!!head.fixed && head.fixedDir === 'left'"
              [nzRight]="!!head.fixed && head.fixedDir === 'right'"
            >
              @if (head.tdTemplate) {
                <ng-container *ngTemplateOutlet="head.tdTemplate; context: row | contextPipe: '$$dataItem'"></ng-container>
              } @else {
                @if (head.pipe) {
                  <span [title]="row | tableFiledPipe: head.field | map: head.pipe">{{ row | tableFiledPipe: head.field | map: head.pipe }}</span>
                } @else {
                  <ng-container>
                    <span [title]="row | tableFiledPipe: head.field">{{ row | tableFiledPipe: head.field }}</span>
                  </ng-container>
                }
              }
            </td>
          }
        }
      </tr>
    }
  </tbody>
</nz-table>
